<template>
	<view>
		<uni-popup ref="popup" :is-mask-click="false" type="bottom" background-color="#f5f5f5">
			<view class="popup-content">
				<view class="flex item-center">
					<image src="../../../static/image/login-logo.png" style="width:24px;height:24px;"></image>
					<text class="title">火动通告</text>
				</view>
				<view class="flex flex-col">
					<text class="sub-title">申请获取你的头像与昵称</text>
					<text class="sub-desc">方便与团长、顾客的识别与沟通</text>
				</view>
				<view class="form">
					<uni-forms :modelValue="formData">
						<uni-forms-item label="头像" name="avatar" class="item-center">
							<view class="flex item-center">
								<view class="flex-1"></view>
								<button open-type="chooseAvatar" @chooseavatar="chooseAvatar" class="avatar-btn">
									<image :src="formData.avatar" class="avatar"></image>
								</button>
							</view>
						</uni-forms-item>
						<view class="divider"></view>
						<uni-forms-item label="昵称" name="nickName">
							<uni-easyinput id="nickName" style="text-align: end;" :inputBorder="false"
								v-model="formData.nickName" @blur="onBlur" type="nickname"
								placeholder="请输入用户昵称"></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
				</view>
				<button class="uni-primary save-btn" type="warn" @click="submit">保存</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		toRaw,
	} from 'vue'
	import {
		uploadFileApi
	} from '@/api/common.js'

	const emits = defineEmits(['onSubmit'])

	const instance = getCurrentInstance()
	const popup = ref(null)
	const show = ref(false)


	const chooseAvatar = ({
		detail
	}) => {
		if (detail.avatarUrl) {
			uploadFileApi(0, {
				name: 'file',
				filePath: detail.avatarUrl,
			}).then(res => {
				if (res.code === 200) {
					formData.value.avatar = res.data
				}
			})
		}
	}

	const formData = ref({
		nickName: '',
		avatar: ''
	})

	const onBlur = ({
		detail
	}) => {
		formData.value.nickName = detail.value
	}

	const showPopup = (val) => {
		if (val) {
			popup.value.open()
		} else {
			popup.value.close()
		}
	}

	const submit = () => {
		if (!formData.value.avatar) {
			uni.showToast({
				icon: 'none',
				title: '请选择头像'
			})
			return
		} else if (!formData.value.nickName) {
			uni.showToast({
				icon: 'none',
				title: '请输入用户昵称'
			})
			return
		}

		emits('onSubmit', toRaw(formData.value))
	}

	defineExpose({
		showPopup
	})
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 24px;
	}

	.title {
		margin-left: 8px;
		color: #333;
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.sub-title {
		margin-top: 20px;
		color: #333;
		font-family: PingFang SC;
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
	}

	.sub-desc {
		margin-top: 6px;
		color: rgba(51, 51, 51, 0.60);
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.form {
		margin-top: 14px;
		background-color: #fff;
		border-radius: 12px;
		padding: 20px 20px 1px 20px;
		margin-bottom: 32px;
	}

	.divider {
		margin-bottom: 20px;
		height: 1px;
		background-color: #f5f5f5;
	}

	.avatar-btn {
		margin: 0;
		padding: 0;
		box-sizing: content-box;
		background-color: transparent;
		border: none;
		display: flex;

		&::after {
			border: none;
		}
	}

	.avatar {
		width: 52px;
		height: 52px;
		background-color: #999;
		border-radius: 50%;
	}

	.save-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		height: 38px;
		line-height: 38px;
	}
</style>